<template>
  <div class="sku">
    <search @getValue="getSonValue" @mysearch="mysearch"></search>
    <div class="content center">
      <div class="choose">
        <div class="top">
          <div class="line_box">
            <span class="line_box_left">分类：</span>
            <div class="line_box_right line_wrap">
              <span
                v-for="(item, index) in typelist"
                @click="changetype(index, item)"
                :class="current == index ? 'isActiv' : ''"
              >
                {{ item }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 主体内容 -->
      <el-row>
        <el-col :span="24" style="position: relative">
          <Sorts />
          <div class="card_box">
            <div
              class="card"
              @click="changeitem(index)"
              v-for="(item, index) in orglist"
            >
              <img src="https://chengguo-1309318813.cos.ap-beijing.myqcloud.com/uploads/zizhi/qiye/21791717381735_.pic.jpg" alt="" />
              <div class="card_text">
                <p class="card_name">国家小麦工程技术研究中心</p>
                <p class="card_add">河南省郑州市农业路62号</p>
                <div class="card_pop_wrap">
                  <span class="card_pop">小麦种植</span>
                </div>
              </div>
            </div>

            <div class="card" @click="changeitem(1)">
              <img src="https://chengguo-1309318813.cos.ap-beijing.myqcloud.com/uploads/zizhi/qiye/21811717381838_.pic.jpg" alt="" />
              <div class="card_text">
                <p class="card_name">“2011”河南粮食作物协同创新中心</p>
                <p class="card_add">郑州市农业路63号河南农业大学农学院</p>
                <div class="card_pop_wrap">
                  <span class="card_pop">粮食作物</span
                  ><span class="card_pop">经济作物</span
                  >
                </div>
              </div>
            </div>
            <div class="card" @click="changeitem(1)">
              <img src="https://chengguo-1309318813.cos.ap-beijing.myqcloud.com/uploads/zizhi/qiye/21881717382667_.pic.jpg" alt="" />
              <div class="card_text">
                <p class="card_name">新农村发展研究院</p>
                <p class="card_add">河南省郑州市金水区文化路街道农业路63号</p>
                <div class="card_pop_wrap">
                  <span class="card_pop">现代农业</span
                  ><span class="card_pop">人才培养模</span
                  ><span class="card_pop">科技创新</span>
                </div>
              </div>
            </div>
            <div class="card" @click="changeitem(1)">
              <img src="https://chengguo-1309318813.cos.ap-beijing.myqcloud.com/uploads/zizhi/qiye/21911717383010_.pic.jpg" alt="" />
              <div class="card_text">
                <p class="card_name">动物免疫学国际联合研究中心</p>
                <p class="card_add">郑州市金水区农业路河南省农业科学院</p>
                <div class="card_pop_wrap">
                  <span class="card_pop">新型疫苗研发</span
                  ><span class="card_pop">生物医药</span
                  ><span class="card_pop">新材料</span>
                </div>
              </div>
            </div>
            <div class="card" @click="changeitem(1)">
              <img src="https://chengguo-1309318813.cos.ap-beijing.myqcloud.com/uploads/zizhi/qiye/21901717382918_.pic.jpg" alt="" />
              <div class="card_text">
                <p class="card_name">CIMMYT-中国（河南）</p>
                <p class="card_add">河南省郑州市金水区文化路街道农业路63号</p>
                <div class="card_pop_wrap">
                  <span class="card_pop">小麦产业</span
                  ><span class="card_pop">玉米产业</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div v-if="orglist == ''" style="height: 400px">
            <el-empty class="emptybox" description="暂无数据~" />
          </div>
          <div class="pagniation" v-if="orglist.value == ''">
            <el-pagination
              v-model:current-page="currentPage3"
              v-model:page-size="pageSize3"
              layout="prev, pager, next"
              :total="1000"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { log } from "console";
import search from "../acl/search.vue";
import { ref, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import Sorts from "../../components/sorts.vue";
const router = useRouter();
const { proxy } = getCurrentInstance() as any;
const current = ref(0);
const itemcurrent = ref(0);
const changeitem = (index) => {
  itemcurrent.value = index;
  router.push({
    path: "/product/platformdetails",
    query: {
      id: index,
    },
  });
};
const value = ref("");
const orglist: any = ref([]);
const currentPage3 = ref(1);
const pageSize3 = ref(100);
const keyword = ref("");
function getorglist() {
  proxy
    .$get("/user/list/org", {
      current: currentPage3.value,
      limit: 6,
      field: value.value == "全部" ? "" : value.value,
      keyword: keyword.value,
    })
    .then((res: any) => {
      orglist.value = res.data.records;
    });
}

getorglist();
const mysearch = () => {
  getorglist();
};

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  currentPage3.value = val;
  getorglist();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  currentPage3.value = val;
  getorglist();
};
const changetype = (index, item) => {
  current.value = index;
  value.value = item;
  getorglist();
};
const typelist = ["全部", "国家级", "省级", "校级", "科技示范基地"];
const getSonValue = (e) => {
  console.log(e); //子组件传入的值
  keyword.value = e;
};
</script>
<style lang="scss" scoped>
.sku {
  .center {
    transform: translateY(-52px);
    width: 1400px;
    margin: 0 auto;
  }

  .choose {
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
    opacity: 1;
    padding: 33px 26px;
    .top {
      .line_box {
        margin-bottom: 20px;
        display: flex;
        align-items: baseline;
        span {
          white-space: nowrap;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666;
          opacity: 1;
          padding: 6px 18px;
          text-align: left;
        }

        .spwidth {
          width: 914px !important;
        }
        .line_wrap {
          height: auto !important;
        }

        .line_box_left {
          min-width: 110px;
          text-align: left;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 700;
          color: #4a4a4a;
          opacity: 1;
        }
        .line_box_right {
          display: flex;
          flex-wrap: wrap;
          width: 1040px;
          height: 40px;
          overflow: hidden;
          flex: 1;
          span {
            white-space: nowrap;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666;
            opacity: 1;
            padding: 8px 15px;
            text-align: left;
            cursor: pointer;
          }

          .el-input__inner {
            padding-right: 30px;
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: 12px;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0 15px;
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
            width: 100%;
          }
          .el-input__inner::-moz-placeholder {
            font-size: 16px;
            line-height: 100%;
          }
          .el-input__inner::placeholder {
            font-size: 16px;
            line-height: 100%;
          }
          .el-input__suffix {
            right: 5px;
          }
          .el-input__suffix .el-input__icon {
            height: 100%;
            width: 25px;
            text-align: center;
            transition: all 0.3s;
            line-height: 40px;
          }
        }
      }
    }
    .botm {
      p {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666;
        opacity: 1;
        cursor: pointer;
        img {
          width: 7px;
          height: 12px;
          transform: rotate(-90deg);
        }
      }
    }
  }
  .isActiv {
    cursor: pointer;
    background: #2769dc;
    opacity: 1;
    color: #fff !important;
    border-radius: 5px;
    line-height: 25px;
    padding: 5px 15px !important;
    height: 25px;
    box-sizing: content-box;
  }
  .card_box {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    flex-wrap: wrap;

    .card {
      width: 443px;
      height: 392px;
      background: #fff;
      opacity: 1;
      border-radius: 0;
      margin-bottom: 50px;
      &:hover {
        box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        border: 1px solid #2769dc;
        cursor: pointer;
      }
      img {
        width: 100%;
        height: 250px;
        vertical-align: bottom;
      }
      .card_text {
        height: 152px;
        text-align: left;
        margin: 23px 24px;
        .card_name {
          font-size: 19px;
          font-weight: 700;
          line-height: 27px;
          color: #0561d2;
        }
        .card_add,
        .card_name {
          width: 100%;
          text-align: left;
          font-family: Microsoft YaHei;
          opacity: 1;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .card_add {
          font-size: 14px;
          font-weight: 400;
          line-height: 28px;
          color: #aaa;
          margin-top: 2px;
        }
        .card_pop_wrap {
          margin-top: 10px;
          .card_pop {
            background: hsla(0, 0%, 40%, 0.09);
            border-radius: 15px;
          }
          .card_pop,
          .pop {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666;
            opacity: 1;
            padding: 6px 10px;
            margin-top: 20px;
            margin-right: 8px;
          }
          .pop {
            background: #e0dfdf;
            border-radius: 50%;
          }
        }
      }
    }
  }
  .card_box:after {
    content: "";
    width: 30%;
    height: 0;
    cursor: none !important;
  }
}
</style>
